<template>
    <div>
        <div>
            <el-form ref="searchForm" :inline="true" :model="search" label-suffix="" label-width="100px"
                     label-position="left" size="small">
                <el-row>
                    <el-col>
                        <el-form-item label="请选择日期">
                            <el-date-picker
                                v-model="dateRange"
                                value-format="yyyy-MM-dd"
                                unlink-panels
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :picker-options="this.CONST.analysis_date_options">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="平台" prop="platform">
                            <el-select v-model="search.platform"
                                       placeholder="平台">
                                <el-option label="点评" :value="1"></el-option>
                                <el-option label="美团" :value="0"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span=6>
                        <el-form-item :label="darkMode ? '深色模式' : '浅色模式'">
                            <el-switch v-model="darkMode" @change="updateMode" active-color="#0f0c28"
                                       inactive-color="#5fcb71"></el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item>
                            <el-button type="primary" v-on:click="getData">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" v-on:click="reset">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <el-row>
            <el-col :span="12">
                <div ref="scoreChart" style="height:400px; width:100%"></div>
            </el-col>
            <el-col :span="12">
                <div ref="starChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="12">
                <div ref="sourceChart" style="height:400px; width:100%"></div>
            </el-col>
            <el-col :span="12">
                <div ref="sourceBadChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div ref="dateChart" style="height:400px; width:100%"></div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {getDpFeedbackChartData} from '@/api/api'

export default {
    name: "DpFeedbackAnalysis",
    data() {
        return {
            // 搜索条件
            search: {
                startDate: '',
                endDate: '',
            },
            // 时间范围
            dateRange: [],
            // 默认黑色主题色
            darkMode: true,
            // 主题色
            theme: 'dark',

            // 饼图
            scoreOption: {},
            scoreChart: {},
            starOption: {},
            starChart: {},
            sourceOption: {},
            sourceChart: {},
            sourceBadOption: {},
            sourceBadChart: {},

            // 柱状图
            dateOption: {},
            dateChart: {},
        }
    },
    // 这里定义需要父组件传过来的东西
    props: {
        shopId: String,
        shopName: String,
        size: {
            type: String,
            default: 'small'
        },
        startDate: String,
        endDate: String,
    },
    watch: {
        shopName: function (val, oldVal) {
            this.shopName = val;
        },
        startDate: function (val, oldVal) {
            this.startDate = val;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        },
        endDate: function (val, oldVal) {
            this.endDate = val;
            this.dateRange = [this.startDate, this.endDate]
            this.getData();
        },
    },
    methods: {
        updateMode() {
            this.theme = this.darkMode ? 'dark' : 'light';
            if (this.scoreChart.id) {
                // 销毁
                this.scoreChart.dispose();
            }
            this.scoreChart = this.$echarts.init(this.$refs.scoreChart, this.theme);
            this.scoreChart.setOption(this.scoreOption);

            if (this.starChart.id) {
                // 销毁
                this.starChart.dispose();
            }
            this.starChart = this.$echarts.init(this.$refs.starChart, this.theme);
            this.starChart.setOption(this.starOption);

            if (this.sourceChart.id) {
                // 销毁
                this.sourceChart.dispose();
            }
            this.sourceChart = this.$echarts.init(this.$refs.sourceChart, this.theme);
            this.sourceChart.setOption(this.sourceOption);

            if (this.sourceBadChart.id) {
                // 销毁
                this.sourceBadChart.dispose();
            }
            this.sourceBadChart = this.$echarts.init(this.$refs.sourceBadChart, this.theme);
            this.sourceBadChart.setOption(this.sourceBadOption);

            if (this.dateChart.id) {
                // 销毁
                this.dateChart.dispose();
            }
            this.dateChart = this.$echarts.init(this.$refs.dateChart, this.theme);
            this.dateChart.setOption(this.dateOption);
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        // 图表初始化
        initChart() {
            // 基于准备好的dom，初始化echarts实例
            if (this.scoreChart.id) {
                // 已经存在，无需在实例化
            } else {
                this.scoreChart = this.$echarts.init(this.$refs.scoreChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.scoreChart.setOption(this.scoreOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.starChart.id) {

            } else {
                this.starChart = this.$echarts.init(this.$refs.starChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.starChart.setOption(this.starOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.sourceChart.id) {

            } else {
                this.sourceChart = this.$echarts.init(this.$refs.sourceChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.sourceChart.setOption(this.sourceOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.sourceBadChart.id) {

            } else {
                this.sourceBadChart = this.$echarts.init(this.$refs.sourceBadChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.sourceBadChart.setOption(this.sourceBadOption);

            // 基于准备好的dom，初始化echarts实例
            if (this.dateChart.id) {

            } else {
                this.dateChart = this.$echarts.init(this.$refs.dateChart, this.theme);
            }
            // 使用刚指定的配置项和数据显示图表
            this.dateChart.setOption(this.dateOption);
        },
        // 获取表格数据
        getData: function () {
            if (this.shopId) {
                this.search.shopId = this.shopId;
            }
            this.search.startDate = this.dateRange[0];
            this.search.endDate = this.dateRange[1];
            getDpFeedbackChartData(this.search).then(data => {
                if (data.respCode == 1000) {
                    let body = data.body;
                    let score = body.SCORE;
                    this.scoreOption = this.CHART.getPieOption(score.title, score.legendData, score.seriesData)
                    let star = body.STAR;
                    this.starOption = this.CHART.getPieOption(star.title, star.legendData, star.seriesData)
                    let source = body.SOURCE;
                    this.sourceOption = this.CHART.getPieOption(source.title, source.legendData, source.seriesData)
                    let sourceBad = body.SOURCE_BAD;
                    this.sourceBadOption = this.CHART.getPieOption(sourceBad.title, sourceBad.legendData, sourceBad.seriesData)
                    let date = body.DATE;
                    this.dateOption = this.CHART.getBarOption(date.title, date.legendData, date.xdata, date.seriesData, 'line', false, false)
                    // 初始化图表
                    this.initChart();
                }
            });
        },
    },
    created() {
    },
    mounted() {
        // 设置默认日期
        let endDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24));
        let startDate = this.GLOBAL.getFormatDate(new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 8));
        this.dateRange = [startDate, endDate]
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
